<template>
  <div class="business_container">
    <searchCom style="margin-bottom: 15px;" />
    <el-card>
      <div class="add_btn">
        <el-button class="add_btn_one" type="primary" icon="el-icon-circle-plus-outline" @click="showDialog = true">新建</el-button>
        <el-button class="add_btn_two" type="primary">工单配置</el-button>
      </div>

      <!-- table -->
      <div class="bc_table">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="序号" type="index" width="50" align="center" />
          <el-table-column prop="date" label="工单编号" align="center" />
          <el-table-column prop="name" label="设备编号" align="center" />
          <el-table-column prop="address" label="工单类型" align="center" />
          <el-table-column prop="name" label="工单方式" align="center" />
          <el-table-column prop="name" label="工单状态" align="center" />
          <el-table-column prop="name" label="运营人员" align="center" />
          <el-table-column prop="name" label="创建日期" align="center" />
          <el-table-column label="操作" width="120" align="center">
            <template>
              <el-button type="text" size="small" @click="showDetail = true">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <div>
        <paginationCom />
      </div>

      <!-- 新增表单 -->
      <dialogCom :show-dialog.sync="showDialog" />
      <!-- 工单详情 -->
      <taskDetailCom :show-detail.sync="showDetail" :show-replment.sync="showReplment" />
      <!-- 补货详情 -->
      <replenishmentCom :show-replment.sync="showReplment" />
    </el-card>
  </div>
</template>
<script>
import searchCom from './components/search'
import paginationCom from './components/pagination'
import dialogCom from './components/dialogCom'
import taskDetailCom from './components/taskDetail'
import replenishmentCom from './components/replenishment.vue'
export default {
  name: '',
  components: {
    searchCom,
    paginationCom,
    dialogCom,
    taskDetailCom,
    replenishmentCom
  },
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      // 新增
      showDialog: false,
      // 工单详情
      showDetail: false,
      // 补货详情
      showReplment: false
    }
  },
  computed: {
  },
  created() {
  },
  methods: {
  }
}
</script>

<style lang='scss'  scoped>
.add_btn_one{
  background-color: #f46830;
  border: 1px solid #f46830;
}
.add_btn_two{
  background-color: #ebcfbe;
  border: 1px solid #fbf4f0;
}

.business_container{
  .add_btn{
    margin-bottom: 10px;
  }

  .bc_table{
    margin-bottom: 15px;
  }

}
</style>
